Rxjs concatMap

In our last article, we say how to use switchMap operator to handle multiple api calls one by one.

In this tutorial, let's see how to use concatMap operator of rxjs.

What is concatMap?

The concatMap operator will not subscribe to the next observable until the current one is completed. It will maintain the order in which the observable are emitted.

In this example, we shall see how to call multiple api one after the other using the concatMap operator.

Create a new angular application

Lets create an angular application using the angular cli command.

ng new concat-tutorial

Create a HttpService to make api call

Lets create a service to make http api call. Enter the following angular cli command to create a service.

ng g s services/http

Now open the file and modify the code as below.

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) {
  }

  getCall(url: string): Observable<any> {
    return this.http.get(url);
  }
}

Create a service named RxjsService and implement concatMap

Now create a service using the below angular cli command.

ng g s services/rxjs

This will create us a service in the services folder. Now open the rxjs.service.ts file and add the following code.

import { Injectable } from '@angular/core';
import { from } from 'rxjs';
import { concatMap } from 'rxjs/operators';
import { HttpService } from '../services/http.service';
@Injectable({
  providedIn: 'root'
})
export class RxjsService {

  domainUrl = 'https://reqres.in/api/users?page=';
  reqArray = [1, 2, 3, 4, 5];
  constructor(private httpService: HttpService) { }

  concatMapCall() {
    from(this.reqArray).pipe(
      concatMap(id => this.httpService.getCall(this.domainUrl + id))
    ).subscribe((value) => {
      console.log(value);
    });
  }
}

The domainUrl contains the api url.

The reqArray is an array of integers to make api call by appending to the above domainUrl.

The concatMapCall() function, contains the from rxjs operator, which is used to convert an array to an observable.

Here, the from operator takes reqArray array variable as parameter and emit values of array one by one.

The concatMap operator gets the integers in the array one by one in the id parameter and appends the id to the domainUrl and makes an api call.

Here, the concatMap will wait until the current observable is completed. Only then it will form the next url and make the api call. So here it makes 5 api calls one after the other.

Now, lets call the concatMapCall function in the RxjsService service in the app.component.ts. Open the app.component.ts file and modify the code as below.

import { Component, OnInit } from '@angular/core';
import { RxjsService } from './services/rxjs.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent implements OnInit {

  constructor(private rxjsService: RxjsService) {
    console.log('App component loaded');
  }
  ngOnInit(): void {
    this.rxjsService.concatMapCall();
  }
}

Run the application using

ng serve --o

Now press F12 and check the Console and Network tab. It looks as below.
Here, each api call will be completed and responded with the status code 200.